<template>
  <div>
    <!-- 导入Excel -->

    <el-upload
      action="/上传文件的接口"
      :on-change="onChange"
      :auto-upload="false"
      :show-file-list="false"
      accept=".xls, .xlsx"
    >
      <!-- Excel-- -->
      <el-button type="warning" icon="el-icon-folder-add">批量导入</el-button>
      <el-button type="warning" icon="el-icon-download" @click="exportToExcel"
        >批量导出</el-button
      >
    </el-upload>
    <br />
    <hr />
  </div>
</template>

<script>
// 第一步：需要安装三个依赖
// 　　npm install -S file-saver xlsx  （这里其实安装了2个依赖）
//     npm install xlsx@0.16.0 --save
// 　　npm install -D script-loader

// 第二步：在main.js文件中全局导入挂载xlsx插件
// 　　//  导入excel插件
// 　　import XLSX from 'xlsx'
// 　　Vue.prototype.XLSX = XLSX

// 第三步：在src下新建文件： excel，增加Blob.js和Export2Excel.js

import { export_json_to_excel } from "@/excel/Export2Excel";

export default {
  data() {
    return {
      studentlist: [
        {
          id: "",
          stuNumber: "",
          stuName: "",
          sex: "",
          tel: "",
          sushe: "",
          xueyuan: "",
          banji: "",
          lyNumber: "",
        },
      ],
    };
  },
  methods: {
    // ----------以下为导入Excel数据功能--------------
    // 文件选择回调；注意： 导入模板地址： /src/excel/template/导入模板.xls
    onChange(file, fileList) {
      console.log(fileList);
      this.fileData = file; // 保存当前选择文件
      this.readExcel(); // 调用读取数据的方法
    },
    // 读取数据
    readExcel(e) {
      // console.log(e);
      let that = this;
      const files = that.fileData;
      // console.log(files);
      if (!files) {
        //如果没有文件
        return false;
      } else if (!/.(xls|xlsx)$/.test(files.name.toLowerCase())) {
        this.$message.error("上传格式不正确，请上传xls或者xlsx格式");
        return false;
      }
      const fileReader = new FileReader();
      fileReader.onload = (ev) => {
        try {
          const data = ev.target.result; // console.log(data)
          const workbook = this.XLSX.read(data, {
            type: "binary",
          });
          //console.log(workbook.SheetNames);
          if (workbook.SheetNames.length >= 1) {
            this.$message({
              message: "导入数据表格成功",
              showClose: true,
              type: "success",
            });
          }
          const wsname = workbook.SheetNames[0]; //取第一张表
          const ws = this.XLSX.utils.sheet_to_json(workbook.Sheets[wsname]); //生成json表格内容
          // console.log(ws);
          that.outputs = []; //清空接收数据
          for (var i = 0; i < ws.length; i++) {
            var sheetData = {
              // 键名为绑定 el 表格的关键字，值则是 ws[i][对应表头名]
              id: ws[i]["id"],
              stuNumber: ws[i]["学号"],
              stuName: ws[i]["姓名"],
              sex: ws[i]["性别"],
              tel: ws[i]["电话"],
              xueyuan: ws[i]["学院"],
              banji: ws[i]["班级"],
              lyNumber: ws[i]["楼宇号"],
              sushe: ws[i]["宿舍号"],
            };
            that.studentlist.unshift(sheetData);
          }
          console.table(that.studentlist);
          this.$refs.upload.value = "";
        } catch (e) {
          return false;
        }
      }; // 如果为原生 input 则应是 files[0]
      fileReader.readAsBinaryString(files.raw);

      // api封装一个方法，参数为： studentlist ，批量插入到数据库即可
    },

    // ----------以下为导出Excel数据功能--------------
    exportToExcel() {
      //excel数据导出
      require.ensure([], () => {
        const tHeader = [
          "id",
          "学号",
          "姓名",
          "性别",
          "联系电话",
          "宿舍号",
          "学院",
          "班级",
          "楼宇号",
        ];
        const filterVal = [
          "id",
          "stuNumber",
          "stuName",
          "sex",
          "tel",
          "sushe",
          "xueyuan",
          "banji",
          "lyNumber",
        ];

        //从数据库读取数据集合
        const list = this.studentlist; //导出这个list集合对象
        const data = this.formatJson(filterVal, list);
        export_json_to_excel(tHeader, data, "2012A学生列表excel");
      });
    },
    
    formatJson(filterVal, jsonData) {
      return jsonData.map((v) => filterVal.map((j) => v[j]));
    },
  },
};
</script>